<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>立方体</title>
</head>

<body>
  <h3>立方体 - 颜色不同</h3>
  <canvas id="webgl" width="500" height="500" style="background-color: rgba(197, 194, 194, 1);"></canvas>

  <script id="vertexShader" type="x-shader/x-vertex">
      attribute vec4 a_pos;
      attribute vec4 a_color;
      varying vec4 v_color;
      void main(){
         //旋转角度30度转化为弧度值
         float radian = radians(50.0);
         // 余弦值
         float cos = cos(radian);
         // 正弦值
         float sin = sin(radian);
         // 旋转矩阵
         mat4 mx = mat4(1,0,0,0, 0,cos,-sin,0, 0,sin,cos,0, 0,0,0,1);
         mat4 my = mat4(cos,0,sin,0, 0,1,0,0, -sin,0,cos,0, 0,0,0,1);

         gl_Position = mx * my * a_pos;
         //颜色插值计算
         v_color = a_color;
      }
  </script>

  <script id="fragmentShader" type="x-shader/x-fragment">
      precision lowp float;
      varying vec4 v_color;
      void main(){
        gl_FragColor = v_color;
      }
  </script>
  <script type="module">

    var canvas = document.getElementById("webgl");
    var gl = canvas.getContext("webgl");

    var vertexShaderSource = document.getElementById("vertexShader").innerText;
    var fragShaderSource = document.getElementById("fragmentShader").innerText;

    var program = initShader(gl, vertexShaderSource, fragShaderSource);


    // 从外部向顶点着色器内传输数据
    var aposLocation = gl.getAttribLocation(program, 'a_pos');
    var a_color = gl.getAttribLocation(program, 'a_color');

    /**
     创建顶点位置数据数组data,Javascript中小数点前面的0可以省略
    **/
    var data = new Float32Array([
      0.5, 0.5, 0.5, -0.5, 0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, 0.5, -0.5, -0.5, 0.5, 0.5, -0.5, 0.5,      //正面1
      0.5, 0.5, 0.5,   0.5, -0.5, 0.5,   0.5, -0.5, -0.5,   0.5, 0.5, 0.5,   0.5, -0.5, -0.5,  0.5, 0.5, -0.5,      //右侧面2
      0.5, 0.5, 0.5,   0.5, 0.5, -0.5,   -0.5, 0.5, -0.5,   0.5, 0.5, 0.5,   -0.5, 0.5, -0.5,   -0.5, 0.5, 0.5,      //上面3
      -0.5, 0.5, 0.5,   -0.5, 0.5, -0.5,   -0.5, -0.5, -0.5, //  -0.5, 0.5, 0.5,   -0.5, -0.5, -0.5,   -0.5, -0.5, 0.5,//左侧面4

      -0.5, -0.5, -0.5,   0.5, -0.5, -0.5,   0.5, -0.5, 0.5,   -0.5, -0.5, -0.5,   0.5, -0.5, 0.5,   -0.5, -0.5, 0.5,//面5
      0.5, -0.5, -0.5, -0.5, -0.5, -0.5, -0.5, 0.5, -0.5,// 0.5, -0.5, -0.5, -0.5, 0.5, -0.5, 0.5, 0.5, -0.5 //面6
    ]);

    /**
     创建顶点颜色数组colorData
     **/
    var colorData = new Float32Array([
      1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,//红色——面1
      0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0,//绿色——面2
      0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1,//蓝色——面3
      1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0,//黄色——面4
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,//黑色——面5
      1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 //白色——面6
    ]);
  

    var buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
    gl.vertexAttribPointer(aposLocation, 3, gl.FLOAT, false, 0, 0);//设置点为2位
    gl.enableVertexAttribArray(aposLocation);

    var colorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, colorData, gl.STATIC_DRAW);
    gl.vertexAttribPointer(a_color, 3, gl.FLOAT, false, 0, 0);//设置点为2位
    gl.enableVertexAttribArray(a_color);


    /**执行绘制之前，一定要开启深度测试，以免颜色混乱**/
    gl.enable(gl.DEPTH_TEST);

    // 6个面,每个面两三角形，6个点
    // gl.drawArrays(gl.TRIANGLE_FAN, 0, 6);//绘制矩形边框
    // gl.drawArrays(gl.TRIANGLE_FAN, 6, 6);//绘制矩形边框
    // gl.drawArrays(gl.TRIANGLE_FAN, 12, 6);//绘制矩形边框
    // gl.drawArrays(gl.TRIANGLE_FAN, 18, 6);//绘制矩形边框
    gl.drawArrays(gl.TRIANGLE_FAN, 24, 6);//绘制矩形边框
    gl.drawArrays(gl.TRIANGLE_FAN, 30, 6);//绘制矩形边框

    function initShader(gl, vertexShaderSource, fragShaderSource) {
      //创建顶点着色器对象
      var vertexShader = gl.createShader(gl.VERTEX_SHADER);
      //创建片元着色器对象
      var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
      //引入顶点、片元着色器源代码
      gl.shaderSource(vertexShader, vertexShaderSource);
      gl.shaderSource(fragmentShader, fragShaderSource);
      //编译顶点、片元着色器
      gl.compileShader(vertexShader);
      gl.compileShader(fragmentShader);

      //创建程序对象program
      var program = gl.createProgram();
      //附着顶点着色器和片元着色器到program
      gl.attachShader(program, vertexShader);
      gl.attachShader(program, fragmentShader);
      //链接program
      gl.linkProgram(program);
      //使用program
      gl.useProgram(program);
      //返回程序program对象
      return program;
    }
  </script>
</body>

</html>
